<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!--    引入首页样式-->
    <link href="../admin/favicon.ico" rel="shortcut icon"/>
    <!--    引入首页样式-->
    <link href="../admin/indexCss.css" rel="stylesheet" type="text/css">



    <!--    引入element首页样式-->
    <link href="../admin/indexCss.css" rel="stylesheet" type="text/css">
    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <link href="elment.css" rel="stylesheet">
    <style>
        section{
            padding: 160px;
        }
    </style>
</head>
<body>


<header class=" navbar-fixed-top " id="h-new">
    <header-new v-bind:u="u"></header-new>
</header>



<!--正文在这里继续-->
<!--管理员登录-->
<section class="container" id="s1">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-danger" v-show="!geren">
                <div class="panel-heading">
                    <h3 class="panel-title">你的资料</h3>
                </div>
                <div class="panel-body" style="color:rgba(0,0,0,0.68);">
                    <b>空的,什么都没有,你先登陆吧!</b>
                </div>
            </div>
<!--            加了缓存就不能及时更新,需要打开这个提示用户-->
<!--            <div class="panel panel-warning" v-show="warning">-->
<!--                <div class="panel-heading">-->
<!--                    <h3 class="panel-title">重要提示</h3>-->
<!--                </div>-->
<!--                <div class="panel-body" v-show="warning" v-html="message">-->

<!--                </div>-->
<!--            </div>-->

            <div class="panel panel-info" v-show="geren">
                <div class="panel-heading">
                    <i class="panel-title">你的资料</i>
                    <a :href="'gerenDetail.html?uid='+u.userid" class="panel-title" style="float: right;cursor: pointer;text-decoration:none"> <i aria-hidden="true" class="fa fa-arrow-right fa-lg"></i>去修改</a>
                </div>

                <div class="panel-body" style="color:#000;">
                    <div class="col-md-12">
                        <div class="col-md-9">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title">用户名</h3>
                                </div>
                                <div class="panel-body">
                                    {{u.username}}
                                </div>
                            </div>
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    <h3 class="panel-title">自我介绍</h3>
                                </div>
                                <div class="panel-body" v-text="u.intro">
                                    这个人很懒!
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title">头像</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="col-md-12" style="height: 125px;overflow: hidden;padding: 0">
                                        <img alt="小熊饼干头像" src="/moren.jpg"  style="width: 100%" v-show="u.url=='' || u.url==null">
                                        <img :src="u.url" style="width: 100%" >
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">

                        <div class="col-md-4">
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    <h3 class="panel-title">昵称</h3>
                                </div>
                                <div class="panel-body" v-text="u.nick">
                                    小熊饼干
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-warning">
                                <div class="panel-heading">
                                    <h3 class="panel-title">电话</h3>
                                </div>
                                <div class="panel-body" v-text="u.phone">
                                    您没留
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-danger">
                                <div class="panel-heading">
                                    <h3 class="panel-title">你的年龄</h3>
                                </div>
                                <div class="panel-body" v-text="u.age">
                                    刚出生
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-4">
                            <div class="panel panel-danger">
                                <div class="panel-heading">
                                    <h3 class="panel-title">性别</h3>
                                </div>
                                <div class="panel-body" v-text="u.gender">
                                    保密
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-warning">
                                <div class="panel-heading">
                                    <h3 class="panel-title">在这花了多少钱</h3>
                                </div>
                                <div class="panel-body" v-text="u.price">
                                    您并没花!  穷鬼!
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h3 class="panel-title">买过几个商品</h3>
                                </div>
                                <div class="panel-body" v-text="u.sum">
                                    您并没买任何东西!
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <h3 class="panel-title">您的收货地址</h3>
                            </div>
                            <div class="panel-body" v-for="d in u.addresses">
                                <el-col :span="21">
                                    <span v-text="d.addressname">无</span><br>
                                    <i style="color:#444141;" v-text="d.remark">无</i>
                                </el-col>
                                <el-col :span="3">
                                    <el-button :plain="true" @click="open3" circle icon="el-icon-edit" style="width: 20px;height: 20px;padding: 1px" type="primary"></el-button>
                                    <br>
                                    <br>
                                    <el-button :plain="true" @click="open4" circle icon="el-icon-delete" style="width: 20px;height: 20px;padding: 1px" type="danger"></el-button>
                                </el-col>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--导入弹窗组件-->
<script src=" https://unpkg.com/sweetalert/dist/sweetalert.min.js "></script>
<!--引入vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v = new Vue({
        el:"#s1"
        ,data:{
            geren:false,
            warning:false,
            message:'',
            userid: 0,
            u:[]
        },
        created:function (){
            let that = this
            axios.get("/mall/getUser").then(function (response) {
                v.u = response.data;
                v.userid = response.data.userid;
                if (v.u!=null){
                    v.geren=true;
                }
            })
            let w = location.search.split("=")[1]
            if (w=='warning'){
                that.warning=true
                that.message="<i style='color: #F96B6C' class=\"fa fa-exclamation\" aria-hidden=\"true\"></i><b style='color: #F96B6C'>信息修改后,需要重新登陆即可显示!</b>";
            }

        },mounted:function (){
        }
        ,methods: {
            open1() {
                this.$message({
                    showClose: true,
                    message: '这是一条消息提示'
                });
            },

            open2() {
                this.$message({
                    showClose: true,
                    message: '看到这个说明你是个认真的孩子',
                    type: 'success'
                });
            },

            open3() {
                this.$message({
                    showClose: true,
                    message: '看到这个说明你是个认真的孩子,我还没做修改,嘿嘿!',
                    type: 'warning'
                });
            },

            open4() {
                this.$message({
                    showClose: true,
                    message: '我还没做我还没做删除,嘿嘿!',
                    type: 'error'
                });
            }

        }
    })
</script>
<!--引入header-->
<!--<script src="js/header.js"></script>-->
<script src="js/header-new.js"></script>
<script>
    let vn = new Vue({
        el:"#h-new"
        ,data:{
            u:[]
        },
        created:function (){
            axios.get("/mall/getUser").then(function (response) {
                vn.u = response.data;
            })
        }
    })
</script>
</body>
</html>